import { Component, Input, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FileUploadModule } from 'primeng/fileupload';
import { MessageService } from 'primeng/api';

import { i18nPipeModule } from '../pipes/i18n';
import { BaseComponent } from './base.component';

/**
 * REST请求的根路径，由公共脚本生成。
 */
declare var restRoot: string;
/**
 * 本组件用于算成文件下载链接。
 * @example
 * 在app.moudle.ts中
 * import { IFileUploadModule} from 'iisp-ng';
    NgModule({
    imports: [IFileUploadModule,...]
 * 在component.ts中
 * import { FileUploadInfo } from 'iisp-ng';
 * export class xxxComponent extends BaseComponent {
 *      fileUploadInfo: FileUploadInfo = new FileUploadInfo();
 * }
 * 在html中
 * <i-file-upload [fileUploadInfo]="fileUploadInfo"></i-file-upload>
 */
@Component( {
    selector: "i-file-upload",
    template: `
    <div style="display:inline-block;">
    <p-fileUpload mode="basic" [multiple]="fileUploadInfo.isMultipleMode" [url]="uploadUrl" [accept]="fileUploadInfo.allowedFileType"
        [disabled]="fileUploadInfo.isDisabled" [auto]="fileUploadInfo.isAutoUpload" 
        uploadLabel="{{'upload.file'|i18n}}" cancelLabel="{{'upload.cancel'|i18n}}" chooseLabel="{{'choose.file'|i18n}}"
        maxFileSize="{{fileUploadInfo.maxSize}}" (onUpload)="onUpload($event)" (onError)="onError($event)" (onClear)="onClear()" (onProgress)="onProgress()">
    </p-fileUpload>
    </div>
    <div style="display:inline-block;">
        <i *ngIf="isUploading" class="ui-autocomplete-loader fa fa-circle-o-notch fa-spin fa-fw ng-star-inserted" style="position: static;"></i>
        <span *ngIf="fileUploadInfo.files"><ul class="uploaded-files"><li *ngFor='let f1 of fileUploadInfo.files'>{{f1.name}} - {{f1.size/1000 | number: '1.0-0'}}KB</li></ul></span>
    </div>
    `
} )
export class IFileUploadComponent extends BaseComponent {
    @Input()
    fileUploadInfo: FileUploadInfo;
    //files: Array<any>;
    filenames: Array<any>;
    uploadUrl = restRoot + "/common/files";
    isUploading = false;
    constructor(messageService: MessageService ) {
        super(messageService);
    }

    //  定义事件，上传文件
    onUpload( event: any ) {
        this.fileUploadInfo.uploadedFiles = event.originalEvent.body.uploadPaths;
        this.fileUploadInfo.files = event.files;
//        for ( let file of event.files ) {
//            this.fileUploadInfo.files.push( file );
//        }
    }
    onError( event: any ) {
        this.showErrorKey( "upload.file.error" );
    }
    onClear(): void {
        this.isUploading = false;
    }
    onProgress(): void {
        this.isUploading = true;
    }
    isRunning(): boolean { return false; }
}

export class FileUploadInfo {
    /**
     * 上传了的文件在服务器端的路径
     */
    uploadedFiles: string[];
    files: string[];

    /**
     * Defines the UI of the component, possible values are "advanced" and "basic".
     */
    mode = "basic";
    /**
     * 指定最大上传文件字节数，缺省为20M字节.
     */
    maxSize = 20000000;
    /** 
     * 允许上传的文件类型，如："image/*,text/*,".
     * 所有类型见：http://www.w3school.com.cn/media/media_mimeref.asp
     * 或直接规定扩展名，如：".csv,.sql".
     */
    allowedFileType: string = "";
    isDisabled = false;
    isMultipleMode = false;
    /**
     * 是否自动上传。
     * 是：选取文件就会自动上传；
     * 否：选取文件后，等到点击上传按钮才上传。
     */
    isAutoUpload = true;
    reset(): void {
        this.uploadedFiles = undefined;
    }
    constructor( allowedFileType?: string ) {
        if ( allowedFileType ) {
            this.allowedFileType = allowedFileType;
        }
    }
}

@NgModule( {
    imports: [CommonModule, i18nPipeModule, FileUploadModule],
    exports: [IFileUploadComponent],
    declarations: [IFileUploadComponent]
} )
export class IFileUploadModule { }